<template>
    <div class="login_box">
        <!-- 登录框 -->
        <div class="login_container">
            <h2>电商后台管理平台</h2>
            <!-- 登录表单 -->
            <el-form class="login_form" :model="userObj" :rules="loginFormRules" ref="loginFormRef">
                <el-form-item prop="username">
                    <!-- 用户名 -->
                    <el-input v-model="userObj.username" placeholder="请输入用户名">

                        <template #prefix>
                            <el-icon>
                                <svg-icon name="user"></svg-icon>
                            </el-icon>
                        </template>

                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type='password' show-password v-model="userObj.password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon>
                                <svg-icon name="password"></svg-icon>
                            </el-icon>
                        </template>

                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="goLogin">登录</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { goLoginApi } from '@/http/api'

//定义登录用户信息
const userObj = reactive({
    username: 'admin',
    password: '123456'
})


//定义表单ref
const loginFormRef = ref<FormInstance>()

//定义表单验证规则
const loginFormRules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 5, max: 20, message: '用户名长的长度在5~20个之间', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 20, message: '密码长的长度在5~20个之间', trigger: 'blur' },
    ]
})


//去登录
const goLogin = () => {
    //表单合法性检验
    loginFormRef.value?.validate(async valid => {
        console.log('是否验证通过：', valid)
        if (!valid) return;

        //调用登录接口
        const res = await goLoginApi(userObj)
        console.log('登录成功：', res)
    })

}

//重置表单
const resetForm = () => {

}

</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";

.login_box {
    width: 100%;
    height: 100%;
    background: #2b4b6b;
    position: relative;
}

.login_container {
    box-sizing: border-box;
    width: 45%;
    min-width: 500px;
    padding: 0 30px;
    height: 260px;
    background: #fff;
    @include box_v_h_center(-100px);
    border-radius: 10px;
    box-shadow: 0 0 10px #fff;

    h2 {
        text-align: center;
    }
}

.login_form {
    margin-top: 36px;
}


:deep(.el-form-item__content) {
    justify-content: flex-end;
}
</style>